<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>弹性盒子案例01</title>

	</head>
	<style>
		#bg {
			width: 100vw;
			height: 100vh;
			border: 1px solid red;
			display: flex;
			flex-wrap: wrap;
		}
		
		#d1 {
			/* 弹性 压缩宽度*/
			width: 200px;
			height: 200px;
			background-color: greenyellow;
			margin: 5px;
			order: 3;
		}
		
		#d2 {
			/* 弹性 压缩宽度*/
			width: 100px;
			height: 200px;
			background-color: greenyellow;
			margin: 5px;
			order: 2;
		}
		
		#d3 {
			/* 弹性 压缩宽度*/
			width: 100px;
			height: 200px;
			background-color: greenyellow;
			margin: 5px;
			order: 1;
		}
	</style>

	<body>
		<!--弹性盒子-->
		<div id="bg">
			<!--弹性子元素-->
			<div id="d1">
				1
			</div>
			<div id="d2">
				2
			</div>
			<div id="d3">
				3
			</div>
			<div id="d3">
				4
			</div>
		</div>

	</body>

</html>